<script setup>
import { onMounted, onUnmounted, ref, watch } from "vue";

//example components
import NavbarDefault from "@/examples/navbars/NavbarDefault.vue";
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
import Header from "@/examples/Header.vue";
import BadLands from "./Components/BadLands.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import AllTires from "@/views/components/AllTires.vue";
//images
import vueMkHeader from "@/assets/img/products/header-bg.png";
import TBRBg from "@/assets/img/products/TBR-bg.png";
import STRBg from "@/assets/img/products/STR-bg.png";
import tireLeft from "@/assets/img/products/tire-left.png";
import tireRight from "@/assets/img/products/tire-right.png";
import bg1 from "@/assets/img/products/bg1.png";
import bg2 from "@/assets/img/products/bg2.png";

import { useRouter } from "vue-router";

import { fileLinkToStreamDownload } from "@/utils";

let menuType = ref(1);
let curList = ref([]);
let labelValue = ref(true);
let curProductId = ref(1);
const router = useRouter();
//hooks
const body = document.getElementsByTagName("body")[0];

watch(
    () => router.currentRoute.value.query.type,
    (newRouterName) => {
        menuType.value = newRouterName;
    },
    { immediate: true }
);
const changeMenu = (type) => {
    menuType.value = type;
};
const changeLabel = () => {
    labelValue.value = !labelValue.value;
};
const dosth = (val) => {
    labelValue.value = !labelValue.value;
    curProductId.value = val;
};
const downloadFile = () => {
    const nameObj = {
        1: "CPD",
        5: "CTD",
        6: "CBD",
        9: "CP(Q)YD",
        16: "CQD",
    };
};
onMounted(() => {
    body.classList.add("presentation-page");
    body.classList.add("bg-gray-200");
});
onUnmounted(() => {
    body.classList.remove("presentation-page");
    body.classList.remove("bg-gray-200");
});
</script>

<template>
    <div class="position-sticky z-index-sticky top-0 w-100">
        <NavbarDefault transparent />
    </div>
    <Header>
        <div class="page-header min-vh-100 page-header1" :style="`background-image: url(${vueMkHeader});`" loading="lazy">
            <div class="row">
                <div class="col-lg-4">
                    <h1 class="border-text uppercase"><span class="ignore">BADLANDS </span><br />TIRES</h1>
                    <div class="desc text-white text-f-Montserrat-Regular mb-5">Designed for versatility and endurance, Badlands Tires keep you moving through every terrain, from highways to off-road trails. With all-terrain, mud-terrain, and rugged terrain options, Badlands deliver powerful performance, traction, and reliability wherever you go.</div>
                </div>
                <div class="col-lg-4 col-lg-middle"></div>
                <div class="col-lg-4" style="text-align: right">
                    <div class="border-text uppercase"><span class="ignore">M-TRAC </span><br />TIRES</div>
                    <div class="desc text-white text-f-Montserrat-Regular mb-5">Engineered for smooth handling and precision, these tires perform reliably on any road and in any season. With specialized options for touring, high performance, CUVs, SUVs, and light truck, each tire ensures a comfortable and responsive drive, giving you confidence on the road.</div>
                </div>
            </div>
        </div>
    </Header>
    <BadLands />

    <AllTires />
    <!-- <DefaultFooter /> -->
</template>
<style scoped>
.header-title {
    font-family: ERASBD;
    font-weight: 400;
    /* line-height: 6rem; */
    color: #ed1c24;
    text-stroke: 1px #fff;
    -webkit-text-stroke: 1px #fff;
    margin-bottom: 2rem;
    font-size: calc(4rem + 2.1vw) !important;
}
.page-header1 {
    padding: 0 5rem;
}
@media (max-width: 991.98px) {
    .header-title {
        font-size: 2.5rem !important;
    }
    .page-header1 {
        padding: 0 1rem;
        margin-top: 5rem;
    }
    .border-text {
        font-size: 2.2rem;
        line-height: 2.4rem;
    }
    .min-vh-100 {
        min-height: 560px !important;
    }
    .desc {
        display: none;
    }
    .col-lg-middle {
        margin: 11.5rem 0;
    }
}
@media (min-width: 991.99px) {
    .border-text {
        font-size: 4rem;
    }
    .desc {
        display: block;
    }
}
</style>
